﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>折线图和柱状图结合示例</title>
    <!-- 引入本地 Echarts 库，确保路径正确 -->
    <script src="~/js/echarts.min.js"></script>
    <style>
        #main {
            width: 1000px; /* 增大图表容器宽度 */
            height: 500px;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            margin-left: 330px;
        }

        .button-container button {
                padding: 4px 8px;
                margin: 0 5px;
                border: none;
                background-color: #007bff;
                color: white;
                cursor: pointer;
                border-radius: 4px;
                transition: background-color 0.3s ease;
        }

        .button-container button:hover {
                background-color: #0056b3;
        }
    </style>
</head>

<body>
    <!-- 按钮容器 -->
    <div class="button-container">
        <button id="lastWeekBtn">最近一周</button>
        <button id="last30DaysBtn">近30天</button>
        <button id="lastYearBtn">最近一年</button>
    </div>
    <!-- 定义图表容器 -->
    <div id="main"></div>
    <script type="text/javascript">
        window.onload = function () {
            // 初始化 echarts 实例
            var myChart = echarts.init(document.getElementById('main'));
            console.log('Echarts 实例初始化成功');

            // 定义不同时间范围的数据生成函数
            function generateLastWeekData() {
                var xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                var barData = [];
                var lineData = [];
                for (let i = 0; i < 7; i++) {
                    barData.push(Math.floor(Math.random() * 300));
                    lineData.push(Math.floor(Math.random() * 50));
                }
                return { xData, barData, lineData };
            }

            function generateLast30DaysData() {
                var xData = [];
                var barData = [];
                var lineData = [];
                for (let i = 1; i <= 30; i++) {
                    xData.push(`第${i}天`);
                    barData.push(Math.floor(Math.random() * 500));
                    lineData.push(Math.floor(Math.random() * 80));
                }
                return { xData, barData, lineData };
            }

            function generateLastYearData() {
                var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                var barData = [];
                var lineData = [];
                for (let i = 0; i < 12; i++) {
                    barData.push(Math.floor(Math.random() * 800));
                    lineData.push(Math.floor(Math.random() * 100));
                }
                return { xData, barData, lineData };
            }

            // 初始化图表配置项
            var option = {
                title: {
                    
                    subtext: '柱形图：订单额\n折线图：订单数',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '订单额（元）'
                    },
                    {
                        type: 'value',
                        name: '订单数（笔）'
                    }
                ],
                series: [
                    {
                        name: '订单额',
                        type: 'bar',
                        yAxisIndex: 0
                    },
                    {
                        name: '订单数',
                        type: 'line',
                        yAxisIndex: 1
                    }
                ]
            };

            // 绑定按钮点击事件
            document.getElementById('lastWeekBtn').addEventListener('click', function () {
                var data = generateLastWeekData();
                option.xAxis.data = data.xData;
                option.series[0].data = data.barData;
                option.series[1].data = data.lineData;
                myChart.setOption(option);
            });

            document.getElementById('last30DaysBtn').addEventListener('click', function () {
                var data = generateLast30DaysData();
                option.xAxis.data = data.xData;
                option.series[0].data = data.barData;
                option.series[1].data = data.lineData;
                myChart.setOption(option);
            });

            document.getElementById('lastYearBtn').addEventListener('click', function () {
                var data = generateLastYearData();
                option.xAxis.data = data.xData;
                option.series[0].data = data.barData;
                option.series[1].data = data.lineData;
                myChart.setOption(option);
            });

            // 页面加载时先显示最近一年数据
            var initialData = generateLastYearData();
            option.xAxis.data = initialData.xData;
            option.series[0].data = initialData.barData;
            option.series[1].data = initialData.lineData;
            myChart.setOption(option);
            console.log('图表配置已应用');
        };
    </script>
</body>

</html>